<template>
  <div>
    <div class="right-title">
      <span>查询</span>
    </div>
    <div class="right-content">
      <div class="search">
        <input type="text" 
              v-model="userInfo"
              placeholder="请输入学号或姓名进行查询"
              class="searchInput" 
        >
        <div class="iconfont icon_search" @click="searchUsers">&#xe63f;</div>
      </div>
      <div class="searchResult">
        <el-collapse v-model="activeStudent" accordion>
          <el-collapse-item title="全部" name="1">
            <el-table :data="searchData" stripe style="width: 100%">
              <el-table-column prop="userId" label="学号" width="100"></el-table-column>
              <el-table-column prop="userName" label="姓名" width="70"></el-table-column>
              <el-table-column prop="userDirection" label="部门" width="70"></el-table-column>
              <el-table-column prop="userStation" label="职位" width="110"></el-table-column>
              <el-table-column prop="userResume" label="简介" width="140"></el-table-column>
              <el-table-column prop="userPunish" label="违规记录" width="100"></el-table-column>
              <el-table-column prop="userAward" label="奖励记录" width="140"></el-table-column>
              <el-table-column>
                <el-button type="danger" plain @click="open1">删除</el-button>
                <el-button type="primary" plain @click="downloadResume">下载简历</el-button>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
        <el-collapse v-model="activeManager" accordion>
          <el-collapse-item title="院务委员/极客/创客" name="1">
            <el-table :data="searchData[1]" stripe style="width: 100%">
              <el-table-column prop="geekerId" label="学号" width="100"></el-table-column>
              <el-table-column prop="geekerName" label="姓名" width="70"></el-table-column>
              <el-table-column prop="geekerDirection" label="方向" width="90"></el-table-column>
              <el-table-column prop="projectInfo" label="项目经历" width="270"></el-table-column>
              <el-table-column prop="geekerStation" label="职位" width="90"></el-table-column>
              <el-table-column prop="geekerPhone" label="电话" width="110"></el-table-column>
              <el-table-column>
                <el-button type="danger" plain @click="open2">删除</el-button>
                <el-button type="primary" plain @click="downloadResume">下载简历</el-button>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import config from '../../action/config.js';

export default {
  name:"searchStudent",

  data() {
    return{
      activeStudent:'1',
      activeManager:'1',
      userInfo:'',
      searchData: [ 
        // [
        //   {
        //     userId: "2021000003",
        //     userName:"李国瑞",
        //     userDirection: "CPU",
        //     userStation: "CPU一组成员",
        //     userResume: "来自山西太原，喜欢运动，喜欢你",
        //     userPunish: "无",
        //     userAward: "互联网加校赛金奖"
        //   },
        // ],
        // [
        //   {
        //     geekerId: "2019005311",
        //     geekerName: "李国瑞",
        //     geekerDirection: "人工智能",
        //     projectInfo: "云研云思签到系统、Dresults云笔记",
        //     geekerStation: "院务委员",
        //     geekerPhone: "19903439208"
        //   }
        // ],
      ],
    };
  },
  methods:{
    downloadResume(){
      window.location.href="./wyb.docx"
    },
    open1() {
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.$post(config.api.post.Manager.deleteUsers,{userId:[this.searchData[0].userId]},{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
        .then((response)=>{
          this.deleteUsers = response.data;
          if(response.code == 0){
            this.searchUsers();
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    open2() {
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.$post(config.api.post.Manager.deleteUsers,{userId:[this.searchData[1].userId]},{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
        .then((response)=>{
          this.deleteUsers = response.data;
          if(response.code == 0){
            this.searchUsers();
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    searchUsers() {
      // let token = localStorage.getItem('token');
      let params = {
        userInfo:this.userInfo,
      }
      this.$axios.$get(config.api.get.Manager.selectUser,{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')},params:params})
        .then((response)=>{
          this.searchData = response.data;
      });
    },
  },
}
</script>
<style>
  .right-title{
    height: 60px;
    width: 100%;
    background-color: #4880d3;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 2px 2px 2px #3a3939b3;
  }
  .right-title span{
    font-size:20px;
    line-height: 60px;
    font-weight: 450;
    color:#fff;
    margin-left: 4%;
  }
  .right-content{
    width: 90%;
    height: 550px;
    margin: 0 auto;
    margin-top: 20px;
  }
  .searchInput{
    width: 40%;
    height: 40px;
    margin-left: 23%;
    font-size: 18px;
    padding-left: 1%;
    border-bottom: 2px solid #050114;
    background: transparent;
    color: #000207 !important;
  }
  .icon_search{
    display: inline-block;
    color: #031125;
    font-size: 24px;
    cursor: pointer;
  }
  .searchResult{
    margin-top: 30px;
  }
</style>